<template>
  <div>
    <el-form ref="form" :model="sysDictType" label-width="100px" size="small">
      <el-form-item label="字典名称" prop="dictName">
        <el-input v-model="sysDictType.dictName" placeholder="请输入字典名称" clearable/>
      </el-form-item>
      <el-form-item label="字典类型" prop="dictType">
        <el-input v-model="sysDictType.dictType" placeholder="请输入字典类型" clearable/>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" v-model="sysDictType.remark" placeholder="请输入备注" clearable/>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="sysDictType.status">
          <el-radio v-for="item in statusOptions" :label="item.dictValue">{{ item.dictLabel }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="update">修改</el-button>
        <el-button type="warning" size="small" @click="sysDictType={status: 0}">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import sysDictTypeApi from "@/api/system/sysDictType";
import sysDictDataApi from "@/api/system/sysDictData";
import {emptyStringToNull} from "@/utils/form";

export default {
  name: "sys-dict-type-update",
  // props 传参
  props: {
    activeId: {
      type: Number,
      default: null
    }
  },
  // 监听父组件里面的 activeId
  watch: {
    activeId: {
      immediate: true,
      handler: function (newVal, oldVal) {
        this.getById(newVal);
      }
    }
  },
  data() {
    return {
      //声明属性去存在放字典数据
      statusOptions: [],
      // 修改字典类型的表单数据
      sysDictType: {
        dictName: null,
        dictType: null,
        remark: null,
        status: null
      },
    }
  },
  created() {
    //加载字典数据->状态
    this.getDictDataByDictType();
  },
  methods: {
    // 根据字典类型加载字典数据->状态
    getDictDataByDictType() {
      sysDictDataApi.getDictDataByDictType("sys_status_type").then(res => {
        this.statusOptions = res.data
      })
    },
    // 根据id查询字典类型
    getById(dictId) {
      sysDictTypeApi.getById(dictId).then(res => {
        this.sysDictType = res.data;
      })
    },
    // 更新
    update() {
      let sendData = emptyStringToNull(this.sysDictType);
      sysDictTypeApi.update(sendData).then(res => {
        this.$message.success(res.msg)
        this.$emit("after")
        this.$emit("close")
      })
    }
  }
}
</script>

<style scoped>

</style>
